<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
  <title>途居露营地</title>
  <link href="https://cdn.bootcss.com/normalize/8.0.0/normalize.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/mui/3.4.0/css/mui.min.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/mui/3.4.0/js/mui.min.js"></script>
  <link href="./css/shop/style.css" rel="stylesheet">
  <script type="text/javascript">
    (function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          var clientWidth = docEl.clientWidth
          if (!clientWidth) return
          docEl.style.fontSize = 75 * (clientWidth / 375) + 'px'
        }
      if (!doc.addEventListener) return
      win.addEventListener(resizeEvt, recalc, false)
      doc.addEventListener('DOMContentLoaded', recalc, false)
    })(document, window)
  </script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
  <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: rgba(46,46,46,0.60);"></a>
  <h1 class="mui-title header-title">途居露营地</h1>
</header>
<form style="margin-top: 44px;">
  <!--选择租赁物品-->
  <div class="shop-box">
    <div class="shop">
      <div class="shop-top">
        选择租赁物品
        <div class="red-coin">乐惠分850</div>
      </div>
      <div class="shop-alone">
        <div class="shop-left">
          <img src="./images/images_umbrella.png" alt="" style="width: 100%;height:100%;">
        </div>
        <div class="shop-center">
          <div class="shop-title">自动折叠伞</div>
          <div class="shop-desc">
            乐惠分850分可以免费试用雨伞
          </div>
        </div>
        <div class="shop-right">
            <span>
              <input type="checkbox" class="input_check" id="check1">
              <label for="check1"></label>
            </span>
        </div>
      </div>
      <div class="shop-alone">
        <div class="shop-left">
          <img src="./images/images_charging.png" alt="" style="width: 100%;height:100%;">
        </div>
        <div class="shop-center">
          <div class="shop-title">2000毫安充电宝</div>
          <div class="shop-desc">
            乐惠分850以上，可以免费试用1个充电宝
          </div>
        </div>
        <div class="shop-right">
            <span>
              <input type="checkbox" class="input_check" id="check2">
              <label for="check2"></label>
            </span>
        </div>
      </div>
    </div>
  </div>
  <!--选择领取物品-->
  <div class="shop-box">
    <div class="shop">
      <div class="shop-top">
        选择领取物品
        <div class="red-coin">乐惠分900</div>
      </div>
      <div class="shop-alone">
        <div class="shop-left">
          <img src="./images/images_water.png" alt="" style="width: 100%;height:100%;">
        </div>
        <div class="shop-center">
          <div class="shop-title">300ml瓶装水</div>
          <div class="shop-desc">
            乐惠分900分可以免费领取饮用水
          </div>
        </div>
        <div class="shop-right">
            <span>
              <input type="checkbox" class="input_check" id="check3">
              <label for="check3"></label>
            </span>
        </div>
      </div>
      <div class="shop-alone">
        <div class="shop-left">
          <img src="./images/images_raincoat.png" alt="" style="width: 100%;height:100%;">
        </div>
        <div class="shop-center">
          <div class="shop-title">一次性雨衣</div>
          <div class="shop-desc">
            乐惠分900以上，可以免费领取1件一次性雨衣
          </div>
        </div>
        <div class="shop-right">
            <span>
              <input type="checkbox" class="input_check" id="check4">
              <label for="check4"></label>
            </span>
        </div>
      </div>
      <div class="shop-alone">
        <div class="shop-left">
          <img src="./images/images_souvenir.png" alt="" style="width: 100%;height:100%;">
        </div>
        <div class="shop-center">
          <div class="shop-title">景区纪念品</div>
          <div class="shop-desc">
            乐惠分900以上，可以免费领取景区纪念品
          </div>
        </div>
        <div class="shop-right">
            <span>
              <input type="checkbox" class="input_check" id="check5">
              <label for="check5"></label>
            </span>
        </div>
      </div>
    </div>
  </div>
  <!--提交按钮-->
  <div class="submit-box">
    <input type="submit" value="确认提交" class="shop-submit-btn"/>
  </div>
</form>
<script>

</script>
</body>
</html>